<!--
 * @Description: 用户评价列表组件
 * @Author: Gaq
 * @Date: 2022-10-21 19:08:59
 * @LastEditTime: 2022-11-29 19:39:13
 * @LastEditors: Gaq
-->
<script setup>
import request from "../utils/request";
import bus from "vue3-eventbus";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import _ from "lodash";

const { state } = useStore();
const evaluateList = ref([]);
const evaluateItem = ref([]);
const { proxy } = getCurrentInstance();
let props = defineProps({
  clickId: Number,
  selectVal: String,
});
let goodId = ref();
onBeforeMount(() => {
  bus.on("provideEvaluateData", (id) => {
    goodId.value = id;
    getEvaluate(id);
  });
});
let id = ref(props.clickId);
// 监视组件传递过来的值
watch(
  [() => _.cloneDeep(props.clickId), () => _.cloneDeep(props.selectVal)],
  ([newVal, newSelect], [oldValoldVal, oldSelect]) => {
    id.value = newVal;
    filterEvaluate(id.value);
    sortList(newSelect);
  }
);
const filterEvaluate = (value) => {
  switch (value) {
    case 1:
      evaluateItem.value = evaluateList.value;
      break;
    case 3:
      evaluateItem.value = evaluateList.value.filter((item) => item.score == 5);
      break;
    case 5:
      evaluateItem.value = evaluateList.value.filter(
        (item) => item.score == 3 || item.score == 4
      );
      break;
    case 7:
      evaluateItem.value = evaluateList.value.filter(
        (item) => item.score == 1 || item.score == 2
      );
      break;
  }
};
const sortList = (value) => {
  if (value == "时间排序") {
    evaluateItem.value.sort((a, b) => {
      let obj1 = proxy.$formDate(a["createTime"]);
      let obj2 = proxy.$formDate(b["createTime"]);
      const val1 = Math.floor(new Date(obj1).getTime() / 1000);
      const val2 = Math.floor(new Date(obj2).getTime() / 1000);
      return val2 - val1;
    });
  } else {
    request
      .get(`/goodsEvaluateMain/getPart/${goodId.value}?pageNum=${1}`)
      .then((res) => {
        res.data.evaMainList.map((i) => {
          i.image = JSON.parse(i.image);
        });
        evaluateList.value = res.data.evaMainList;
        filterEvaluate(id.value);
      });
  }
};
const getEvaluate = (id) => {
  request.get(`/goodsEvaluateMain/getPart/${id}?pageNum=${1}`).then((res) => {
    res.data.evaMainList.map((i) => {
      i.image = JSON.parse(i.image);
    });
    evaluateList.value = res.data.evaMainList;
    filterEvaluate(1);
  });
};
let deleteItem = {};
const deleteEvaluate = (value) => {
  request
    .delete(`/goodsEvaluateMain/deleteOne/${value.gevaMainId}`)
    .then((res) => {
      res.code == 0
        ? (ElMessage.success("删除成功"), getEvaluate(value.goodsId))
        : ElMessage.error("删除失败");
    });
};
</script>

<template>
  <div v-show="evaluateItem.length == 0 ? true : false">
    <el-empty :image-size="100" description="暂时没有您想要的评论~" />
  </div>
  <div v-for="item in evaluateItem">
    <div class="evaluateBox">
      <el-avatar shape="square" :src="item.userImage" size="large" />
      <div class="infoBox">
        <p style="font-size: small">{{ item.userName }}</p>
        <p>{{ item.detail }}</p>
        <div style="display: flex; margin-top: 10px">
          <div class="imgBox" v-for="i in item.image">
            <img :src="i" alt="加载失败" />
          </div>
        </div>
        <p style="font-size: 2px; color: grey; margin-top: 8px">
          {{ $formDate(item.createTime) }}
        </p>
      </div>
      <div
        v-show="item.userId == state.userId ? true : false"
        @click="deleteEvaluate(item)"
        style="
          color: red;
          cursor: pointer;
          font-size: 13px;
          position: absolute;
          right: 20px;
          top: 10px;
        "
      >
        <i-ep-Delete />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.evaluateBox {
  position: relative;
  margin-top: 20px;
  display: flex;
}
.infoBox {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
}
.imgBox {
  margin-right: 10px;
  width: 120px;
  height: 120px;
  img {
    width: 100%;
  }
}
</style>